//引入defineStore用于创建store
import axios from "axios"
import { nanoid } from "nanoid"
import { defineStore } from "pinia"
import { reactive } from "vue"

//定义并暴露一个store
// export const useTalkStore = defineStore('talk', {
//   //动作
//   actions: {
//     //如果请求需要多次调用，可以放在store里面
//     async getLoveTalk() {
//       // 发请求，下面这行的写法是：连续解构赋值+重命名
//       let { data: { data } } = await axios.get('https://v2.xxapi.cn/api/weibohot')
//       const title = data[Math.floor(Math.random() * data.length)]?.title
//       //把请求回来的字符串，包装成一个对象
//       let obj = { id: nanoid(), title }
//       //放到数组中
//       this.talkList.unshift(obj)
//     }
//   },
//   //状态
//   state() {
//     return {
//       talkList: JSON.parse(localStorage.getItem('talkList') as string) || [] //避免是null无法调用unshift
//     }
//   },
//   //计算
//   getters: {}
// })

//store组合式写法，箭头函数返回
// #但是数据得用ref，或者reactive包裹
export const useTalkStore = defineStore('talk', () => {
  //talkList相当于state
  const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])
  // getATalk函数相当于action
  async function getLoveTalk() {
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let { data: { data } } = await axios.get('https://v2.xxapi.cn/api/weibohot')
    const title = data[Math.floor(Math.random() * data.length)]?.title
    //把请求回来的字符串，包装成一个对象
    let obj = { id: nanoid(), title }
    //放到数组中
    talkList.unshift(obj)
  }

  return { talkList, getLoveTalk }
})